<template>
  <div class="BlogBody">
    <div class="zhezhao" :style="HideZ()">
      <div class="CreateFIle"><input type="text" placeholder="请输入项目名称" v-model="name"></div>
      <div class="CreateFIleButton"><button @click="AddBlogDirectory()">创建</button><button class="quxiao"  @click="zheJudeFalse()">取消</button></div>
    </div>
    <div class="BlogBodyContent">
      <div class="personInfo">
        <div class="personHead">
          <div class="kk"></div>
          <div class="portrait"><img :src="$store.state.port"></div>
          <h4 class="personName">{{$store.state.name}}</h4>
          <p class="profile">个人简介</p>
          <div class="proPage">
            <h4>文章数</h4>
            <p>32</p>
          </div>
          <div class="proPage">
            <h4>评论数</h4>
            <p>32</p>
          </div>
<p class="profileInfo" @click="jump('BlogInfo')">查看个人资料</p>
        </div>
        <div class="personDirectory">
          <div class="personDirectoryHead">
          <div class="personDirectoryD1">
            <h4>个人目录</h4>
            <img src="../../public/img/更多.png">
          </div>
          </div>
          <div class="personDirectoryContent">
            <div class="personDirectoryList" v-for="value in DirectoryArr">
              <div class="personDiretoryFather" @click="AddSon(value.name)" style="cursor: pointer">
              <div class="personDirectoryListLeft">
                <img src="../../public/img/文件夹-1.png"><span>{{value.name}}</span>
              </div>
              <div class="personDirectoryListRight"><img src="../../public/img/左箭头.png" :style="pointer(value.name)"></div>
              </div>
              <div class="psersonDirectorySon" :style="JudeStyle(value.name)">
                <div style="cursor: pointer;margin-top: 10px" v-for="item in value['get_content']" @click="jumpDetails(item.id)"><img src="../../public/img/文章5.png"><span>{{item.title}}</span></div>
                <div v-if="value['get_content'].length == 0" style="cursor: pointer;margin-top: 10px" @click="Bdelete(value.id)"><span>目前文件夹为空 点击删除</span></div>
              </div>
            </div>
          </div>
          <div class="personDirectoryFooter">
            <p>向下滚动</p>
          </div>
        </div>
        <div class="pageDirectory" v-if="$store.state.ConDisplay">
          <div class="personDirectoryHead">
          <div class="personDirectoryD1">
            <h4>文章目录</h4>
          
            <img src="../../public/img/更多.png">
          </div>
          </div>
          <div class="PortDirectoryContent">
           <div v-for="data in $store.state.TitleData" @click="setTitle(data.id)" class="pageDire" :style="pageDirFunc(data.num)">
              {{data.content}}
           </div>
          </div>
          <div class="personDirectoryFooter">
            
          </div>
        </div>
      </div>
      <div class="PageList">
        <div class="PageListCreate">
          <div>
            <div class="PageListPortrait"><img :src="$store.state.port"></div>
            <div class="PageListCreateButton">
              <button @click="zheJudeTrue()">创建项目</button>
              <button @click="jumpRelease()">发布文章</button>
            </div>
          </div>
        </div>
        <router-view :key="$route.fullPath" />

      </div>
      <div class="pageRecommend">
        <div class="pageRecommendContent">
          <div><img src="/dist/img/IAA_Logo_2019_black_RGB.70163f6a.png"></div>
          <h3>ZZC的超级博客</h3>
          <p>用于记录学习交流技术的博客</p>
          <div class="About">
            <h3 class="niu">越学越牛</h3>
            <p>更多项目</p>
          </div>
        </div>
        <div class="pageTopContent">
          <div class="personDirectoryHead">
            <div class="personDirectoryD1" style="width: 90%;margin: 0 auto">
              <h4>热度排行榜</h4>
              <img src="../../public/img/更多.png">
            </div>
          </div>
          <div class="personTopList"  style="cursor: pointer"  v-for="data in TopArr" @click="jumpDetails(data.id)">
            <div class="personTopListHeader">
              <div class="personTopLeft"><h5>{{data.title}}</h5></div>
              <div class="personTopRight">{{data['get_directory'].name}}</div>
            </div>
            <div class="personTopListBody" v-html="HandelContent(data.content)">A*算法是用来寻找两点之间的最短路径的算法,可以规避障碍物,一般用在游戏里面.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name: "BlogBody",
  data(){
   return {
      zheJude:false,
      name:'',
      JudeSon:'',
     contentArr:[],
     DirectoryArr:[],
     TopArr:[],
   }
  },
  methods:{
    pageDirFunc(num){
      return {'margin-left':(num*10)-15+'px'}
    },
     Bdelete(id){
       var request = this.myCode();
       var config = {
         method:'get',
         url:'/DirectoryDelete',
         params:{
           'id':id
         }
       };
       
       request(config).then((res)=>{
                if(res.data.status == 200){
                    this.GetDirectory();
                }
       })

     },
     setTitle(val){
           this.$store.commit('SetCountId',val);
       },
     HideZ(){
            return this.zheJude ? {display:'block'}:{display:'none'};
     },
    zheJudeTrue(){
            this.zheJude = true;
    },
    zheJudeFalse(){
          this.zheJude = false;
    },
    AddSon(value){
        if(this.JudeSon == value){
          this.JudeSon= ''
        }else{
          this.JudeSon= value
        }
    },
    JudeStyle(value){
          return this.JudeSon == value ? {'min-height':'0px',visibility:'visible'} : {'height':0,visibility:'hidden'}
    },
    jump(name){
      this.$router.push({'name':name})
    },
    jumpRelease(){
        this.$router.push({'name':'ArticleRelease'})
    },
    jumpDetails(id){
      this.$router.push({name:'BlogDetails',query:{
          'id':id
        }})
    },
    AddBlogDirectory(){

      if(localStorage.getItem('API')){
                if(this.name!=''){
                    var request = this.myCode();
                    var config = {
                      method:'get',
                      url:'/AddBlogDirectory',
                      params:{
                         'api_token':localStorage.getItem('API'),
                         'name':this.name
                      }
                    };
                  request(config).then((res)=>{
                       console.log(res);
                       if(res.data.status == 200){
                         alert('添加成功');
                       }
                  })
                }
      }
    },
    HandelContent(content){
       var  blog = new this.HandString();
       return  blog.HandelContent(content,73,false);
},

    pointer(value){
      return this.JudeSon == value ? {transform: 'rotateZ(-90deg)'} : {transform: 'rotateZ(0)'}
    },
         GetDirectory(){
           var request = this.myCode();
           var config = {
             method:'get',
             url:'/AllDirectory',
             params:{
               'api_token':localStorage.getItem('API')
             }
           };
           request(config).then((res)=>{
             this.DirectoryArr = res.data.data
           })
         },
      GetTop(){
        var request = this.myCode();
        var config = {
          method:'get',
          url:'/BlogTop',
          params:{
          }
        };
        request(config).then((res)=>{
             this.TopArr = res.data.data;
        })
      }
  },
  created(){
     this.GetDirectory();
     this.GetTop();
    var request =  this.myCode();
    const config = {
      'method':'get',
      url:'/GetPort',
      params:{
        api_token:localStorage.getItem('API')
      }
    }
    request(config).then(res=>{
      this.$store.commit('AddPort',res.data.port)
      this.$store.commit('AddName',res.data.name)
    })
  },
  computed:{
         TitleArr(){
            return this.$store.state.TitleData
         }
  },

  watch:{
    TitleArr(val){
   

    }
  }

}
</script>

<style scoped>
.pageDire{
  font-size: 13px;
  margin-top: 15px;
  /* margin-left: 10px; */
  cursor: pointer;
}
.BlogBody{
  background-color:#393939;
  position: relative;

}
.zhezhao{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color:rgba(0,0,0,0.7);
  padding-top: 100px;
}
.zhezhao>div{
  margin-top: 20px;
  text-align: center;
}
.zhezhao>div input{
  width: 200px;
  height: 30px;
  border-radius: 3px;
  border: none;
}
.zhezhao>div button{
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 3px;
  background-color: #303030;
  color: white;
  cursor: pointer;
}
.zhezhao>div  .quxiao{
  background-color: brown;
}
.BlogBody .BlogBodyContent{
  padding-top: 40px;
  width: 1330px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.personInfo{
  width: 18%;
}
.pageRecommend{
  width: 20%;
  height: 500px;
}
.PageList{
  width: 59%;
}
.personHead{
  width: 100%;
  background-color: white;
  height: 380px;
}
.personHead .kk{
  background-color: #303030;
  height: 80px;
}
.portrait{
  width: 80px;
  height: 80px;
  background-color: #555555;
  border-radius: 50%;
  margin: -40px auto 0 auto;
  overflow: hidden;
}
.portrait img{
  width: 100%;
}
.personName{
  margin-top: 13px;
  font-family: "Arial Hebrew", Arial, sans-serif;
  text-align: center;
}
.profile{
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  color: #6d737b;
}
.proPage:nth-child(5){
  margin-top: 20px;
}
.proPage:nth-child(6){
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.proPage{
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.proPage h4{
  color: #6d737b;
  font-size: 15px;
  font-weight: 300;
  font-family: "Adobe 黑体 Std";
}
.proPage p{
  margin-top: 10px;
  font-family: "Arial Hebrew", Arial, sans-serif;
  font-size: 14px;
}
.profileInfo{
  text-align: center;
  font-size: 13px;
  color: #303030;
  margin-top: 15px;
  cursor: pointer;
}
.PageListCreate{
  border-top: #303030 4px solid;
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.PageListCreate>div{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.PageListCreateButton button:nth-child(1){
  background-color: #4d545c;
}
.PageListCreateButton button{
  margin-left: 20px;
  height: 35px;
  width: 100px;
  border: none;
  background-color: #303030;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.PageListPortrait{
  height: 50px;
  width: 50px;
  background-color: #555555;
  border-radius: 50%;
  overflow: hidden;
}
.PageListPortrait img{
  width: 100%;
}














.pageRecommendContent{
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  background-color: white;
}
.pageRecommendContent>h3{
  text-align: center;
  font-family: 微軟正黑體;
  font-size: 15px;
  margin-top: 10px;
  letter-spacing: 4px;
}
.pageRecommendContent>p{
  text-align: center;
  font-family: 微軟正黑體;
  font-size: 11px;
  margin-top: 10px;
  color: #555555;
}
.pageRecommendContent>div{
  padding-top: 20px;
  text-align: center;
}
.pageRecommendContent>div img{
  width: 50%;
}
.About{
  padding-bottom: 15px;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin-top: 20px;
}
.niu{
  font-family: 微軟正黑體;
  font-size: 15px;
}
.About>p{
  color: silver;
  font-size: 13px;
  margin-top: 5px;

}
.personDirectory{
  margin-top: 40px;
  background-color: white;
  padding-top: 10px;
  height: 350px;
}
.personDirectoryHead{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.personDirectoryD1{
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  padding-bottom: 10px;
}
.personDirectoryD1 h4{
  font-size: 14px;
  font-family: 微軟正黑體;
}
.personDirectoryD1 img{
  width: 20px;
}
.personDirectoryContent{
  height:270px;
  overflow: auto;
  scrollbar-width: none;
  font-family: 微软雅黑;
}
.personDirectoryList{
   margin: 0 auto;
  width: 95%;
  margin-top: 15px;
}
.personDiretoryFather{
  display: flex;
  justify-content: space-between;
}
.personDirectoryFooter>p{
  font-family: 微軟正黑體;
  font-size: 13px;
  text-align: center;
}
.personDirectoryListLeft img{
  width: 20px;
}
.personDirectoryListLeft{
  display: flex;
  align-items: center;
}
.personDirectoryListLeft span{
  margin-left: 10px;
  font-size: 13px;
}
.psersonDirectorySon{
  transition: 0.5s;
  overflow: hidden;
}
.psersonDirectorySon>div{
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.psersonDirectorySon>div img{
  margin-left: 10px;
  width: 15px;
}
.psersonDirectorySon>div span{
  margin-left: 10px;
  font-size: 13px;
}
.personDirectoryListRight img{
   width: 15px;
  transition: 0.2s;

}

.pageTopContent{
  padding-top: 10px;
  background-color: white;
  margin-top: 20px;
  padding-bottom: 30px;
}
.personTopList{
  width: 90%;
  margin: 0 auto;
  margin-top: 25px;
}
.personTopListHeader{
  display: flex;
  justify-content: space-between;
}
.personTopLeft{
  font-family: 微軟正黑體;
  width: 150px;


}
.personTopLeft h5{
  text-overflow:ellipsis;
  overflow: hidden;
  word-break:keep-all;
}
.personTopRight{
  font-family: 微軟正黑體;
  font-size: 13px;
}
.personTopListBody{
  font-family: 微軟正黑體;
  color: #6d737b;
  font-size: 12px;
  margin-top: 10px;
  line-height: 20px;
}
.personDirectoryHead[data-v-31f6ead8] {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.pageDirectory{
  margin-top: 40px;
  background-color: white;
  padding-top: 10px;
  /* height: 350px; */
}
.PortDirectoryContent{
font-family: 微软雅黑;
padding-bottom: 30px;
}
</style>